/**
 * 组件函数化调用：创建一个组件实例， 使用方法的方式来调用组件，解决全局使用一个组件时， 传递不同参数问题
 * 可以给组件动态传递参数
 * */ 

 import {createApp} from 'vue'
 import Message from '@/components/Message.vue'
 export type MessageType = 'success' | 'error' | 'default'

 const createMessage = (message: string,  type: MessageType, timeout=2000 ) => {
    
    // 创建Message组件实例： 
    // 参数： 组件对象， 组件中props
    const messageInstance = createApp(Message, {
        message,
        type
    })

    // 挂载组件

    const mountNode = document.createElement('div');
    mountNode.id = 'messageBox';
    document.body.appendChild(mountNode)
    messageInstance.mount(mountNode);

    // 2秒后销毁组件

    setTimeout(() => {
        messageInstance.unmount(mountNode);
        document.body.removeChild(mountNode)
    }, timeout)
 }

 export default createMessage;